import vue from 'vue'
import Vuex from 'vuex'
import router, { resetRouter } from "@/router";
import createPersistedState from "vuex-persistedstate"; // 引入持久化插件，可用于保存 Vuex 状态到本地存储

vue.use(Vuex) // 注册 Vuex 作为 Vue 的状态管理工具

// 根据传入的菜单列表 `menuList` 动态添加路由
function addNewRoute(menuList) {
    console.log('当前的菜单列表:')
    console.log(menuList) // 调试：输出菜单列表
    // let 声明的变量仅在其所在的代码块（即 {} 包括的范围）中有效
    let routes = router.options.routes // 获取路由配置
    console.log('添加前的路由配置:')
    console.log(routes) // 调试：输出当前的路由配置
    console.log(router.getRoutes()); // 查看所有已加载的路由，包括动态添加的
    console.log(router)
    // 查找主路由 "/Index"，并向其子路由中添加新路由
    routes.forEach(routeItem => {
        if (routeItem.path === "/Index") {
            menuList.forEach(menu => {
                // 根据菜单生成子路由配置
                let childRoute = {
                    path: '/' + menu.menuclick, // 菜单路径
                    name: menu.menuname, // 菜单名称
                    meta: {
                        title: menu.menuname // 菜单标题
                    },
                    component: () => import('../components/' + menu.menucomponent) // 动态加载组件
                }

                // 将新生成的子路由添加到 "/Index" 路由的子路由中
                routeItem.children.push(childRoute)
            })
        }
    })

    resetRouter() // 重置当前路由配置以确保新路由的更新生效

    console.log('添加中的路由配置:')
    console.log(routes) // 调试：输出当前的路由配置
    console.log(router.getRoutes()); // 查看所有已加载的路由，包括动态添加的
    console.log(router)
    // 如果你以前是这样写的
    // router.addRoutes(routes) // 添加更新后的路由配置
    routes.forEach(route => router.addRoute(route));
    console.log('添加后的路由配置:')
    console.log(routes) // 调试：输出当前的路由配置
    console.log(router.getRoutes()); // 查看所有已加载的路由，包括动态添加的
    console.log(router)
}

// 导出 Vuex Store 实例
export default new Vuex.Store({
    state: {
        menu: [] // 存储菜单列表
    },
    mutations: {
        // 更新菜单并动态添加路由
        setMenu(state, menuList) {
            state.menu = menuList // 更新菜单数据
            addNewRoute(menuList) // 动态添加路由
        }
    },
    //可以灵活地在数据获取时应用逻辑，例如在返回前进行一些数据处理或筛选
    getters: {
        // 获取菜单列表
        getMenu(state) {
            return state.menu
        }
    },
    plugins: [createPersistedState()]
})
